import 'package:flutter/material.dart';

/// 2022年更新  适配 flutter 3.0
class ChoiceClipHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ChoiceClipHomeState();
  }
}

class _ChoiceClipHomeState extends State<ChoiceClipHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("ChoiceClip")),
      body: Center(
        child: buildChild(),
      ),
    );
  }

  ///定义 标签
  final List<Map<String, dynamic>> _tags = [
    {"tag": "早起", "index": "0"},
    {"tag": "早睡", "index": "1"},
    {"tag": "精神", "index": "2"}
  ];

  buildChild() {
    return Wrap(
      children: _tags.map((e) => buildChip(e)).toList(),
    );
  }

  ///当前选中的标签
  String _index = "0";

  Widget buildChip(Map<String, dynamic> e) {
    String tag = e["tag"];
    String index = e["index"];
    return Padding(
      padding: const EdgeInsets.only(left: 5,right: 5),
      child: ChoiceChip(
        label: Text(tag),
        // true 为选中
        selected: _index == index,
        // 选中切换事件
        onSelected: (bool select) {
          print("onSelected ");
          _index = select ? index : "";
          setState(() {});
        },
        //选中的背景色
        selectedColor: Colors.red,
        //文本显示样式
        labelStyle: TextStyle(
          color: _index == index ? Colors.white : Colors.black,
        ),
        elevation: 4,
        //选中状态下的阴影
        selectedShadowColor: Colors.orange,
        //不可用的时候显示的背景
        disabledColor: Colors.grey,
      ),
    );
  }
}
